<template>
    <div>
        <HomeTop></HomeTop>
        <HomeRight></HomeRight>
        <MyCenterPlugin></MyCenterPlugin>
        <ShoppingCartSearch></ShoppingCartSearch>
        <div class="RefundView-logo">
            <img
                src="https://img.alicdn.com/imgextra/i2/O1CN01bw6IxW1J9dTQPa01x_!!6000000000986-2-tps-148-56.png"></img>
            <h2>我的淘宝</h2>
        </div>
        <div class="RefundView-part1">
            <span>退款管理</span>
            <div class="RefundView-part1-underline"></div>
        </div>
        <div class="RefundView-part2">
            <span class="RefundView-part2-span1">退款类型:&nbsp;</span>
            <el-select v-model="value1" placeholder="全部" class="RefundView-part2-select1">
                <el-option v-for="item in refundtype" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
            </el-select>
            <span class="RefundView-part2-span2">退款时间:&nbsp;</span>
            <el-select v-model="value2" placeholder="最近申请" class="RefundView-part2-select2">
                <el-option v-for="item in refundtime" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
            </el-select>
            <div class="block">
                <span class="demonstration">从&nbsp;&nbsp;</span>
                <el-date-picker class="timexz"  v-model="time" type="datetimerange" range-separator="至" start-placeholder="开始日期"
                    end-placeholder="结束日期">
                </el-date-picker>
            </div>
            <span class="RefundView-part2-span3">退款状态:&nbsp;</span>
            <el-select v-model="value3" placeholder="全部" class="RefundView-part2-select3">
                <el-option v-for="item in refundstatus" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
            </el-select>
            <span class="RefundView-part2-span4">垫付状态:&nbsp;</span>
            <el-select v-model="value4" placeholder="全部" class="RefundView-part2-select4">
                <el-option v-for="item in dfstatus" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
            </el-select>
            <span class="RefundView-part2-span5">小二介入:&nbsp;</span>
            <el-select v-model="value5" placeholder="全部" class="RefundView-part2-select5">
                <el-option v-for="item in twoinsert" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
            </el-select>
            <button>提交</button>
        </div>
        <div class="RefundView-part3">
            <div class="RefundView-part3-title">
                <span class="RefundView-part3-title-span1">宝贝</span>               
                <span class="RefundView-part3-title-span2" v-for="item in list">{{ item }}</span>
            </div>
            <div class="RefundView-part3-wrap">
                <div class="RefundView-part3-item" v-for="item in iteminfo">
                    <div class="RefundView-part3-item-top">
                        <span>订单编号:&nbsp;{{ item.ordernum }}</span>
                        <span>退款编号:&nbsp;{{ item.refundnum }}</span>
                        <span>{{ item.shopname }}</span>
                    </div>
                    <div class="RefundView-part3-item-bottom">
                        <img :src="item.img"></img>
                        <span class="bottom-name">{{ item.name }}</span>
                        <span class="bottom-text">{{ item.text }}</span>
                        <span class="bottom-price">{{ item.price }}</span>
                        <span class="bottom-time">{{ item.time }}</span>
                        <span class="bottom-servetype">{{ item.servetype }}</span>
                        <span class="bottom-status">{{ item.status }}</span>
                        <span class="bottom-operation">{{ item.operation }}</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import HomeTop from "../components/HomeTop.vue";
import HomeRight from "../components/HomeRight.vue";
import MyCenterPlugin from "@/components/MyCenterPlugin.vue";
import ShoppingCartSearch from "@/components/ShoppingCartSearch.vue";
import "../style/RefundView.css";
export default {
    name: "RefundView",
    data() {
        return {
            refundtype: [{
                value: "全部",
                label: "全部"
            },{
                value:"售中退款",
                label:"售中退款"
            },{
                value:"售后退款",
                label:"售后退款"
            }],
            refundtime:[{
                value: "最近申请",
                label: "最近申请"
            },{
                value:"历史退款",
                label:"历史退款"
            }],
            refundstatus:[{
                value: "全部",
                label: "全部"
            },{
                value:"进行中的订单",
                label:"进行中的订单"
            },{
                value:"退款待处理",
                label:"退款待处理"
            },{
                value:"已拒绝退款",
                label:"已拒绝退款"
            },{
                value:"待买家发货",
                label:"待买家发货"
            },{
                value:"待商家收货",
                label:"待商家收货"
            },{
                value:"待买家收货",
                label:"待买家收货"
            },{
                value:"待商家补寄发货",
                label:"待商家补寄发货"
            },{
                value:"待买家补寄收货",
                label:"待买家补寄收货"
            },{
                value:"退款关闭",
                label:"退款关闭"
            },{
                value:"退款成功",
                label:"退款成功"
            }],
            dfstatus:[{
                value: "全部",
                label: "全部"
            },{
                value:"先行垫付，待商家处理",
                label:"先行垫付，待商家处理"
            },{
                value:"先行垫付，退款成功",
                label:"先行垫付，退款成功"
            },{
                value:"先行垫付，退款关闭",
                label:"先行垫付，退款关闭"
            },{
                value:"先行垫付，商家拒绝退款",
                label:"先行垫付，商家拒绝退款"
            }],
            twoinsert:[{
                value: "全部",
                label: "全部"
            },{
                value:"小二未介入",
                label:"小二未介入"
            },{
                value:"小二已介入",
                label:"小二已介入"
            }],
            value1: "",
            value2: "",
            value3: "",
            value4: "",
            value5: "",
            time: "",
            list:["退款金额","申请时间","服务类型","退款状态","交易操作"],
            iteminfo:[{
                ordernum:"2957507797488871573",
                refundnum:"231434186596877315",
                shopname:"瑾贝生鲜企业店",
                img:"https://img.alicdn.com/bao/uploaded/i1/2220143000622/O1CN01hQw8cj1GSvQ7f4w6W_!!2220143000622.jpg_100x100xz.jpg",
                name:"G瑾贝十三天金凤活珠子五香/香辣10-40枚",
                text:"口味:五香味10枚",
                price:"￥15.90",
                time:"2025-09-25 22:48:32",
                servetype:"仅退款",
                status:"退款成功",
                operation:"服务详情"
            },{
                ordernum:"2957507797488871573",
                refundnum:"231434186596877315",
                shopname:"瑾贝生鲜企业店",
                img:"https://img.alicdn.com/bao/uploaded/i1/2220143000622/O1CN01hQw8cj1GSvQ7f4w6W_!!2220143000622.jpg_100x100xz.jpg",
                name:"G瑾贝十三天金凤活珠子五香/香辣10-40枚",
                text:"口味:五香味10枚",
                price:"￥15.90",
                time:"2025-09-25 22:48:32",
                servetype:"仅退款",
                status:"退款成功",
                operation:"服务详情"
            }],
        };
    },
    methods: {

    },
}
</script>